<template>
  <div id="app-container" style="margin: 10px 50px">
    <el-steps :active="active" finish-status="success">
      <el-step title="填写实习公司"></el-step>
      <el-step title="填写实习经历"></el-step>
      <el-step title="恭喜您完成了实习"></el-step>
    </el-steps>

    <el-card style="margin-top:30px;" class="box-card" v-if="active == 1">
      <el-form
        :model="ruleForm"
        :rules="rules"
        ref="ruleForm"
        label-width="150px"
        class="demo-ruleForm"
      >
        <el-form-item label="公司名称" prop="name">
          <el-input v-model="ruleForm.name"></el-input>
        </el-form-item>

        <el-form-item label="公司类型" prop="envStr">
          <el-select v-model="ruleForm.envStr" placeholder="请选择">
            <el-option
              v-for="item in envOptions"
              :key="item.value"
              :label="item.label"
              :value="item.value"
            >
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="统一社会编码" prop="code">
          <el-input v-model="ruleForm.code"></el-input>
        </el-form-item>

        <el-form-item label="额外说明" prop="memo">
          <el-input v-model="ruleForm.memo"></el-input>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top:30px;" class="box-card" v-if="active == 2">
      <!-- 这里不能再使用ruleForm 换个名字 -->
      <!-- 填写实习经历 -->
      <el-form
        :model="workinfo"
        :rules="workInforules"
        ref="workinfo"
        label-width="100px"
        class="demo-workinfo"
      >
        <el-form-item label="工号" prop="workCode">
          <el-input v-model="workinfo.workCode"></el-input>
        </el-form-item>

        <el-form-item label="职务" prop="position">
          <el-input v-model="workinfo.position"></el-input>
        </el-form-item>

        <el-form-item label="实习时间" prop="time">
          <el-date-picker
            v-model="workinfo.time"
            type="datetimerange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :default-time="['12:00:00']"
          >
          </el-date-picker>
        </el-form-item>
      </el-form>
    </el-card>

    <el-card style="margin-top:30px;" class="box-card" v-if="active == 3">
      恭喜您完成了实习，快去提交实习报告吧！
    </el-card>

    <!-- 翻页的按钮 -->
    <el-button style="margin-top: 12px;" v-if="active != 1 && active != 3" @click="before"
      >上一步</el-button
    >
    <el-button style="margin-top: 12px;" v-if="active != 3" @click="next"
      >下一步</el-button
    >
  </div>
</template>

<script>
import workApi from "@/api/work";

export default {
  data() {
    return {
      workinfo: {
        time: ""
      },
      envOptions: [],
      active: 1,
      ruleForm: {},
      workInforules: {
        workCode: [
          { required: false, message: "请输入您的职工编号", trigger: "blur" },
          { min: 1, max: 15, message: "长度在 1 到 15 个字符", trigger: "blur" }
        ],
        position: [
          { required: true, message: "请输入您的职务", trigger: "blur" },
          { min: 3, max: 15, message: "长度在 3 到 15 个字符", trigger: "blur" }
        ],
        time: [{ required: true, message: "请选择活动区域", trigger: "change" }]
      },
      rules: {
        name: [
          { required: true, message: "请输入公司名称", trigger: "blur" },
          { min: 3, max: 35, message: "长度在 3 到 35 个字符", trigger: "blur" }
        ],
        envStr: [
          { required: true, message: "请选择活动区域", trigger: "change" }
        ],
        code: [
          {
            required: true,
            message: "请输入统一社会信用编码",
            trigger: "blur"
          },
          {
            min: 18,
            max: 18,
            message: "统一社会信用编码错误",
            trigger: "blur"
          }
        ],
        memo: [
          { required: false, message: "额外说明", trigger: "blur" },
          { min: 3, max: 50, message: "长度在 3 到 50 个字符", trigger: "blur" }
        ]
      }
    };
  },
  methods: {
    // 这里需要改造 确保信息完整后再让用户进行下一步

    next() {
      console.log(this.ruleForm, "情韵");
      if (this.active === 1) {
        this.$refs["ruleForm"].validate(valid => {
          if (valid) {
            // 分步存储当前的企业信息
            // 这里不能直接存储起来 会出问题 等后面都添加完毕一起存储起来
            // workApi.insertEnv(this.ruleForm).then(resp=>{
            //   this.$message.success("企业信息添加成功");
            // })
            // 下一步
            this.active++;
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      } else if (this.active === 2) {
        this.$refs["workinfo"].validate(valid => {
          if (valid) {
            // 分步存储当前的企业信息
            workApi.insertEnv(this.ruleForm).then(resp => {
              this.$message.success("企业信息添加成功");
            });
            // 这里不能直接存储起来 会出问题 等后面都添加完毕一起存储起来
            // 这里存储工作时间信息
            workApi.insertWorkInfo(this.workinfo.position,this.workinfo.workCode,this.workinfo.time,this.ruleForm.code).then(resp=>{
              console.log("数据添加成功");
              this.$message.success("工作信息添加成功");
            })
            // 下一步
            this.active++;
          } else {
            console.log("error submit!!");
            return false;
          }
        });
        // this.active++;
        console.log(this.workinfo);
      }
    },
    before() {

      this.active--;
    }
  },
  created() {
    // 获取企业类型信息
    workApi.getAllEnvType().then(resp => {
      this.envOptions = resp.data.list;
      console.log(resp.data.list);
    });
    // 这里进行判断 如过用户填写过企业和实习信息就不让继续填写了
    workApi.judgeStatus().then(resp=>{
      if(resp.data.status){
        this.active = 3;
      }
    })
  }
};
</script>

<style>
.text {
  font-size: 16px;
}

.item {
  padding: 18px 0;
}
</style>
